<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工更新子页面</title>
    <script src="../../js/jquery-3.4.1.min.js"></script>
    <script src="../../layui/layui.js"></script>
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>
<body>
<form class="layui-form" style="margin-top: 20px">
    <div class="layui-form-item" style="padding-right: 50px;">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input id="employee-name" type="text" name="name" required  lay-verify="required" placeholder="请输入姓名, 如: 张三" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="padding-right: 50px">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="employee-sex" value="0" title="男" checked>
            <input type="radio" name="employee-sex" value="1" title="女">
        </div>
    </div>
    <div class="layui-form-item" style="padding-right: 50px">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-block">
            <input id="employee-phone" type="text" name="name" required  lay-verify="required|phone|number" placeholder="请输入11位电话号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="padding-right: 50px">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input id="employee-email" type="text" name="name" required  lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item"  style="padding-right: 50px">
        <label class="layui-form-label">学历</label>
        <div class="layui-input-block">
            <select id="employee-education" lay-filter="employee-education">
                <option value="0" selected>本科</option>
                <option value="1">硕士</option>
                <option value="2">博士</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" style="padding-right: 50px">
        <label class="layui-form-label">身份证</label>
        <div class="layui-input-block">
            <input id="employee-idcard" type="text" name="name" required  lay-verify="required|identity" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="padding-right: 50px">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-block">
            <input id="employee-address" type="text" name="name" required  lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="padding-right: 50px">
        <label class="layui-form-label">职位</label>
        <div class="layui-input-block">
            <select id="position-select" name="position" lay-verify="required">
                <option value="">请选择职位</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item layui-form-text" style="padding-right: 50px">
        <label class="layui-form-label">部门</label>
        <div class="layui-input-block">
            <select id="department-select" name="department" lay-verify="required">
                <option value="">请选择部门</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item" style="padding-right: 30px; width: 300px; margin: 0 auto; margin-top: 15px">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo" id="submit-btn">提交</button>
            <button id="reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>
    var layerCallback;  // 子页面回调函数
    // 父页面传过来的信息
    var positionsIdAndName = [];
    var departmentsIdAndName = [];
    // 全局函数, 父页面向子页面传值
    function child(data) {
        positionsIdAndName = data.positions;
        departmentsIdAndName = data.departments;
        // 完成后, 回调, 进行渲染
        selectorAppend();
        /*for (var i = 0; i < data.positions.length; i++) {
            console.log(data.positions[i]);
        }
        for (var i = 0; i < data.departments.length; i++) {
            console.log(data.departments[i]);
        }*/
    }
    function selectorAppend() {
        /*进行下拉框动态拼接*/
        console.log(positionsIdAndName);
        for (var i = 0; i < positionsIdAndName.length; i++) {
            $("#position-select").append('<option value=' + positionsIdAndName[i].id + '>' + positionsIdAndName[i].name + '</option>');
        }
        for (var i = 0; i < departmentsIdAndName.length; i++) {
            $("#department-select").append('<option value=' + departmentsIdAndName[i].id + '>' + departmentsIdAndName[i].name + '</option>');
        }


        layui.use('form', function(){
            //监听提交
            $("#submit-btn").click(function () {
                var nowDate = new Date();
                var name = $("#employee-name").val();
                var sex = $('input[name="employee-sex"]:checked').val();
                var phone = $("#employee-phone").val();
                var email = $("#employee-email").val();
                var education = $("#employee-education").find("option:selected").text();
                var idcard = $("#employee-idcard").val();
                var address = $("#employee-address").val();
                var positionId = $("#position-select").val();
                var departmentId = $("#department-select").val();
                var ajaxData = {
                    name: name,
                    sex: sex,
                    phone: phone,
                    email: email,
                    education: education,
                    idcard: idcard,
                    address: address,
                    createdTime: nowDate,
                    positionId: positionId,
                    departmentId: departmentId
                };

                $.ajax({
                    url: '/employees',
                    async: false,
                    method: 'post',
                    data: ajaxData,
                    success: function (res) {
                        if (res.code == 200) {
                            // 回调主界面
                            parent.layerCallback(ajaxData);
                            parent.layer.msg('添加员工成功', {icon: 1});
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        } else {
                            parent.layer.msg('添加员工失败', {icon: 2});
                        }
                        return false;
                    }
                });
            });
        });
    }



</script>
</body>
</html>